<template>
    <div class="header">
        <div class="brand">
            <span class="icon-Music-Acc"></span>
            <span>yfmusic</span>
        </div>
        <div class="search-input">
            <input type="text" placeholder="歌手/歌曲" id="search-input" @keyup.enter="searchSubmit">
            <span class="icon-search" @click="searchSubmit" ></span>
        </div>
        <Search :resultList="resultList"></Search>
    </div>
</template>

<script>
import { mapState } from "vuex";
import Search from '../search/search'
export default {
    data() {
        return {
            searchUrl1:"/apis/soso/fcgi-bin/client_search_cp?ct=24&qqmusic_ver=1298&new_json=1&remoteplace=txt.yqq.song&searchid=63378745066925657&t=0&aggr=1&cr=1&catZhida=1&lossless=0&flag_qc=0&p=1&n=50&w=",
            searchUrl2:"&g_tk=1664415019&jsonpCallback=MusicJsonCallback9477982921852957&hostUin=0&format=jsonp&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0",
            resultData: {},
            resultList: [],
        };
    },
    computed: {
        ...mapState([
            "showSearchResult",
        ]),
    },
    components:{
        Search
    },
    methods: {
        searchSubmit() {
            this.resultList=[];
            let val = $("#search-input").val();
            this.$axios.get(this.searchUrl1 + val + this.searchUrl2).then(response => {
                let str = response.data;
                this.resultData = JSON.parse(str.substring(str.indexOf("(") + 1, str.length - 1));
                for (let item_song of this.resultData.data.song.list) {
                    let singer = "";
                    let song = {
                        songname: "",
                        songmid: "",
                        imgmid: "",
                        singer: ""
                    };
                    song.songname = item_song.name;
                    song.songmid = item_song.file.media_mid;
                    song.imgmid = item_song.album.mid;
                    for (let item_singer of item_song.singer) {
                        if (singer === "") {
                            singer += item_singer.name;
                        } else {
                            singer = singer + "/" + item_singer.name;
                        }
                    }
                    song.singer = singer;
                    this.resultList.push(song);
                }
                $("#search-input").val('');
                this.$store.commit('setShowSearchResult',true);
                this.$store.commit('setSearchCurAnimate',-1);
            });
    },
  }
};
</script>

<style scoped>
.header {
  background: #00c1da;
  padding: 8px 12px;
  color: #fff;
  font-size: 20px;
  line-height: 24px;
  display: flex;
}
.brand,
.search-input {
  height: 24px;
  flex: 1;
}
.search-input {
  position: relative;
  flex-grow: 2;
}
.icon-search {
  position: absolute;
  top: 2px;
  right: 1%;
  cursor: pointer;
}
.search-input input {
  position: absolute;
  border: 0.5px solid #fff;
  height: 20px;
  width: 90%;
  background: #00c1da;
  border-radius: 3px;
  outline: none;
  color: #fff;
  padding: 2px 0 2px 4px;
}
input::placeholder {
  color: #fff;
}
</style>

